<script setup lang="ts">
import axios from "axios";
import { ref, watch } from "vue";
import {ArticleItem ,ArticleResData} from '../types/data'
import  { useRouter } from "vue-router";

// 定义数组接收数据 并渲染
const list = ref<ArticleItem[]>([])

// 接收父组件向子组件传递过来的数据
const props = defineProps<{
  changeID:number
}>()

// 监听 props.changeID的数据是否发生变化
watch(
  ()=>props.changeID,
  async ()=>{
    // console.log('数据发生了变化 被watch监听到了');
   const res = await axios.get<ArticleResData>('http://geek.itheima.net/v1_0/articles',
     {
        params: {
          channel_id: props.changeID,
          timestamp: Date.now(),
        },
      })
      console.log(res.data.data.results);
      list.value = res.data.data.results
  },
  {
    // 默认第一次执行一次
  immediate:true
  })

const router = useRouter()
  const Detail = (id:string)=>{
router.push({
  path:'/detail',
  query:{
    id:id
  }
})
  }
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in list" :key="item.art_id" @click="Detail(item.art_id)">
      <p class="title">{{item.title}}</p>
<template v-if="item.cover.type>0">
<img
       v-for="(it,index) in item.cover.images" :key="index"
       class="img" :src="it" alt="">

</template>

      <div class="info">
        <span>{{item.aut_name}}</span>
        <span>{{ item.comm_count }}</span>
        <span>{{item.pubdate}}</span>
      </div>
    </div>
  </div>
</template>
